<template>
  <div class="table-bg1">
    <!-- <div class="searc_box">

      <a-button @click="uplods()"
                style="margin-left: 15px;"
                type="primary">下载</a-button>
                
      <div class="my-sele">
        <div class="sele_title"> 监管员:</div>
        <a-input v-model="formSel.searchSup"
                 placeholder="请输入监管员" />
        <div class="sele_title"> 被监管机构:</div>
        <a-input v-model="formSel.searchOrg"
                 type="text"
                 placeholder="请输入被监管机构" />
        <div class="sele_title"> 监管品类:</div>
        <a-input v-model="formSel.searchClass"
                 placeholder="请输入监管品类" />
        <div class="sele_title"> 提交时间:</div>

        <a-date-picker @change="onChange"
                       v-model="timeValue" />
        <a-button @click="handSearc()"
                  type="primary">搜索</a-button>
      </div>
    </div>-->
    <div style="display: flex;padding-top: 15px;">
      <a-button
        @click="uplods()"
        style="margin-left: 15px;margin-right:15px;margin-top: 5px;"
        type="primary"
      >下载</a-button>
      <a-form layout="inline">
        <a-form-item label="监管员">
          <a-input
            v-model="formSel.searchSup"
            placeholder="请输入监管员"
          />
        </a-form-item>
        <a-form-item label="被监管机构">
          <a-input
            v-model="formSel.searchOrg"
            placeholder="请输入被监管机构"
          />
        </a-form-item>
        <a-form-item label="监管品类">
          <a-input
            v-model="formSel.searchClass"
            placeholder="请输入监管品类"
          />
        </a-form-item>
        <a-form-item label="提交时间">
          <a-date-picker
            @change="onChange"
            v-model="timeValue"
          />
        </a-form-item>
        <a-form-item>
          <a-button
            type="primary"
            @click="handSearc()"
          >搜索</a-button>
        </a-form-item>
      </a-form>
    </div>

    <a-table
      :rowSelection="{onChange: onSelectChange}"
      ref="table"
      bordered
      :rowKey="record => record.yumId"
      :columns="columns"
      :dataSource="data"
      :loading="false"
      :pagination="pagination"
      :scroll="scroll"
    >
      <!-- //文本 -->
      <!-- <p slot="content"
         slot-scope="text, record"
         style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{{text}}
      </p>-->
      <!-- <p slot="updatedAt"
      slot-scope="text, record">{{!text?'自上传日起未修改':text}}</p>-->
      <!-- <p slot="isShow"
      slot-scope="text">{{text}}</p>-->
      <p
        slot="isShow"
        slot-scope="text"
        :style="{color:(text==0||text==2?'#000':'#42b983')}"
        href="javascript:;"
      >{{text==1?"已发布":(text==2?"拒绝":"未通过")}}</p>
      <div
        style="display: flex;"
        slot="action"
        slot-scope="text,record"
      >
        <a-popconfirm
          title="确定删除吗?"
          @confirm="confirm(record.yumId)"
          @cancel="cancel(record.yumId)"
          okText="是"
          cancelText="否"
        >
          <a-button
            type="danger"
            style="margin-right: 8px;"
          >删除</a-button>
        </a-popconfirm>
        <a-button
          @click="shenhe(2,record.yumId)"
          v-if="record.isShow!=2&&record.isShow==1"
          type="primary"
        >下线</a-button>
        <a-button
          @click="shenhe(0,record.yumId)"
          v-if="record.isShow==2"
          type="primary"
        >上线</a-button>
        <!-- <a-popover v-if="record.isShow!=2&&record.isShow==0"
                   v-model="visible"
                   title="审核"
        trigger="click">-->
        <!-- <a-button @click.stop="shenhe(1,record.yumId,$event)"
                    style="margin-left: 8px;"
                    slot="content"
                    type="primary">通过</a-button>
          <a-button @click.stop="shenhe(2,record.yumId)"
                    style="margin-left: 8px;"
                    slot="content"
        type="primary">不通过</a-button>-->
        <a-popconfirm
          v-if="record.isShow!=2&&record.isShow==0"
          title="审核"
          @confirm="shenhe(1,record.yumId,$event)"
          @cancel="shenhe(2,record.yumId)"
          okText="通过"
          cancelText="不通过"
        >
          <a-button type="primary">审核</a-button>
          <!-- <a-button type="danger"
          style="margin-right: 8px;color: #fff;">审核</a-button>-->
        </a-popconfirm>
        <!-- <a @click="shenhe(1,record.yumId)"
             href="javascript:;"
             slot="content">通过</a>
          <a @click="shenhe(2,record.yumId)"
             href="javascript:;"
             slot="content"
        style="margin-left: 6px;color:#ff4d4f;">不通过</a>-->

        <!-- <a-button type="primary">审核</a-button> -->
        <!-- </a-popover> -->

        <!-- <a-button @click="deletes(record.yumId)"
        type="danger">删除</a-button>-->
      </div>
      <!-- <div slot="audit"
           slot-scope="text,record">
        <a-button @click="deletes(record.yumId)"
                  type="danger">查看</a-button>
      </div>-->
      <div
        slot="backups"
        slot-scope="text, record"
      >
        <a
          href="javascript:;"
          class="dowa"
          target="_blank"
          @click="toExport(record.yumId)"
          download="dowName"
        >下载</a>
      </div>
      <a-button
        slot="audit"
        type="primary"
        slot-scope="text,record"
        @click="chakanxq(record.yumId)"
      >查看详情</a-button>
    </a-table>
    <!-- 弹出详情 -->
    <div ref="imageWrapper">
      <a-modal
        title="详情"
        :visible="xiangqing"
        :width="720"
        @ok="()=>{xiangqing=!xiangqing}"
        @cancel="()=>{xiangqing=!xiangqing}"
      >
        <div class="title_box">
          <a-button
            type="primary"
            @click="createPicture()"
          >保存当前页为图片</a-button>
          <a-row right>
            <a-col :span="4">
              <div class="datatile">溯源ID:</div>
            </a-col>
            <a-col :span="8">{{details.yumId}}</a-col>
            <a-col :span="4">
              <div class="datatile">产品ID:</div>
            </a-col>
            <a-col :span="8">{{details.goodsId}}</a-col>
          </a-row>
          <!-- <a-row>
            <a-col :span="4">
              <div class="datatile">商品名称:</div>
            </a-col>
            <a-col :span="20"></a-col>

          </a-row>-->
          <a-row>
            <a-col :span="4">
              <div class="datatile">受监管机构:</div>
            </a-col>
            <a-col :span="20">{{details.storename}}</a-col>
          </a-row>

          <a-row>
            <!-- 没有 -->
            <!-- <a-col :span="4">
              <div class="datatile">商品缩略图:</div>
            </a-col>-->
            <!-- <a-col :span="12"></a-col> -->
          </a-row>

          <a-row>
            <a-col :span="4">
              <div class="datatile">证据视频:</div>
            </a-col>
            <a-col :span="12">
              <video
                controls="controls"
                :src="details.video"
                class="my_video"
                style="margin-top: 10px;"
                type="video/mp4;"
                codecs="avc1.4D401E, mp4a.40.2"
              >
                <!-- <source 
                type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>-->
              </video>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="4">
              <div class="datatile">取证时间:</div>
            </a-col>
            <a-col :span="8">{{details.createdAt}}</a-col>
            <a-col :span="4">
              <div class="datatile">修改时间:</div>
            </a-col>
            <a-col :span="8">{{details.updatedAt}}</a-col>
          </a-row>
          <a-row>
            <a-col :span="4">
              <div class="datatile">是否显示:</div>
            </a-col>
            <a-col :span="8">{{details.isShow}}</a-col>
            <a-col :span="8">
              <div class="datatile">采集时间:</div>
            </a-col>
            <a-col :span="8">{{details.acquisitionTime}}</a-col>
          </a-row>

          <a-row>
            <a-col :span="4">
              <div class="datatile">天气状况:</div>
            </a-col>
            <a-col :span="8">{{details.weather}}</a-col>
            <a-col :span="4">
              <div class="datatile">实时温度℃:</div>
            </a-col>
            <a-col :span="8">{{details.airTemperature}}</a-col>
          </a-row>

          <a-row>
            <a-col :span="4">
              <div class="datatile">种植品种:</div>
            </a-col>
            <a-col :span="8">{{details.plantingType}}</a-col>
            <a-col :span="4">
              <div class="datatile">工作目的:</div>
            </a-col>
            <a-col :span="8">{{details.purpose}}</a-col>
          </a-row>

          <a-row>
            <a-col :span="4">
              <div class="datatile">受监管基地:</div>
            </a-col>
            <a-col :span="8">{{details.personLiable}}</a-col>
            <a-col :span="4">
              <div class="datatile">使用总量:</div>
            </a-col>
            <a-col :span="8">{{details.productBrand}}</a-col>
          </a-row>
          <a-row>
            <a-col :span="4">
              <div class="datatile">生产设施:</div>
            </a-col>
            <a-col :span="8">{{details.productionFacilities}}</a-col>
            <a-col :span="4">
              <div class="datatile">生产厂家:</div>
            </a-col>
            <a-col :span="8">{{details.manufacturer}}</a-col>
          </a-row>
          <a-row>
            <a-col :span="4">
              <div class="datatile">出厂日期:</div>
            </a-col>
            <a-col :span="8">{{details.productBatches}}</a-col>
            <a-col :span="4">
              <div class="datatile">设施设备:</div>
            </a-col>
            <a-col :span="8">{{details.inculcationMode}}</a-col>
          </a-row>
          <a-row>
            <a-col :span="5">
              <div class="datatile">采样时间:</div>
            </a-col>
            <a-col :span="7">{{details.sourcingSources}}</a-col>
            <a-col :span="4">
              <div class="datatile">操作方法:</div>
            </a-col>

            <a-col :span="8">{{details.operationMethod}}</a-col>
          </a-row>
          <a-row>
            <a-col :span="4">
              <div class="datatile">操作方式:</div>
            </a-col>
            <a-col :span="8">{{details.operationMode}}</a-col>
            <a-col :span="4">
              <div class="datatile">土壤检测:</div>
            </a-col>
            <a-col :span="8">{{details.soilTesting}}</a-col>
          </a-row>
          <a-row>
            <a-col :span="4">
              <div class="datatile">水源采样:</div>
            </a-col>
            <a-col :span="8">{{details.waterSampling}}</a-col>
          </a-row>
          <a-row>
            <a-col :span="4">
              <div class="datatile">检验检测证据采集:</div>
            </a-col>
            <a-col :span="20">
              <img
                v-image-preview
                class="details_img"
                :src="details.soilTestingImg"
                alt
              />
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="4">
              <div class="datatile">投入品证据采集:</div>
            </a-col>
            <a-col :span="20">
              <img
                v-image-preview
                class="details_img"
                :src="details.inputsImg"
                alt
              />
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="4">
              <div class="datatile">操作过程证据图片:</div>
            </a-col>
            <a-col :span="20">
              <img
                v-image-preview
                class="details_img"
                :src="details.operationProcessImg"
                alt
              />
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="4">
              <div class="datatile">监管人员与生产者:</div>
            </a-col>
            <a-col :span="20">
              <img
                v-image-preview
                class="details_img"
                :src="details.groupPhoto"
                alt
              />
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="4">
              <div class="datatile">未监管区域现场(定点取证):</div>
            </a-col>
            <a-col :span="20">
              <img
                v-image-preview
                class="details_img"
                :src="details.contrastImg"
                alt
              />
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="4">
              <div class="datatile">生产监管组照片:</div>
            </a-col>
            <a-col :span="20">
              <img
                v-image-preview
                class="details_img"
                :src="details.superviseImg"
                alt
              />
            </a-col>
          </a-row>
        </div>
      </a-modal>
    </div>
  </div>
</template>
<script>
import reqwest from "reqwest";
import axios from "axios";
import html2canvas from "html2canvas";
export default {
  data() {
    return {
      visible: false,
      abc: "",
      timeValue: undefined,
      item: "",
      formSel: {
        searchSup: "",
        searchOrg: "",
        searchClass: "",
        searchItem: ""
      },
      //   biaotou: [],
      //点击要查看或修改的id
      addid: null,
      xiangqing: false,
      //监管员详情信息
      xqxx: null,
      details: {},
      form: this.$form.createForm(this),
      scroll: { x: 2300 },
      columns: [
        {
          title: "监管员",
          align: "center",
          dataIndex: "supervisor"
          // scopedSlots: { customRender: "supervisor" }
        },
        {
          title: "被监管机构",
          align: "center",
          dataIndex: "storename",
          scopedSlots: { customRender: "storename" }
        },
        {
          title: "监管品类",
          align: "center",
          dataIndex: "plantingType",
          scopedSlots: { customRender: "plantingType" }
        },
        {
          title: "提交时间",
          align: "center",
          dataIndex: "createdAt"
        },
        {
          title: "审核",
          align: "center",
          scopedSlots: { customRender: "audit" }
        },
        {
          title: "发布",
          align: "center",
          dataIndex: "isShow",
          key: "isShow",
          slots: { title: "customTitle" },
          scopedSlots: { customRender: "isShow" }
        },
        // {
        //   title: "审核状态",
        //   align: "center",
        //   dataIndex: "isShow",
        //   key: 'isShow',
        //   slots: { title: 'customTitle' },
        //   scopedSlots: { customRender: "isShow" }
        // },
        {
          title: "操作",
          align: "center",
          fixed: "right",
          width: 100,
          key: "option",
          scopedSlots: { customRender: "action" }
        },
        {
          title: "备份",
          fixed: "right",
          align: "center",
          width: 100,
          scopedSlots: { customRender: "backups" }
        }
      ],
      //分页
      pagination: {
        // 分页配置器
        pageSize: 15, // 一页的数据限制
        current: 0, // 当前页
        total: 0, // 总数
        onChange: (page, pageSize) => {
          this.changePage(page, pageSize);
        }
      },
      arrId: [],
      data: [],
      moment: {},
      dowName: "",
      PH: "",
      CH: ""
    };
  },
  created() {
    var _this = this;
    _this
      .$get("/gen/hjmallind-goods-yum/list", {
        pageNum: _this.pagination.current,
        pageSize: _this.pagination.pageSize,
        plantingType: _this.formSel.searchClass,
        createdAt: _this.formSel.searchItem,
        supervisor: _this.formSel.searchSup,
        storename: _this.formSel.searchOrg
      })
      .then(data => {
        console.log(data.data.data, "======");
        console.log(data.data.data.records);
        console.log(data.data.data.total);
        _this.pagination.total = data.data.data.total;
        _this.data = data.data.data.records;
      })
      .catch(err => {
        console.warn(err);
      });
  },
  methods: {
    createPicture() {
      var _this = this;
      var targetDom = document.querySelector(".ant-modal-content");
      window.pageYOffset = 0;
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      html2canvas(targetDom, {
        // backgroundColor: null,
        useCORS: true, // 【重要】开启跨域配置
        logging: true
        // useCORS: true,
      }).then(function(canvas) {
        var imgData = canvas.toDataURL();
        _this.fileDownload(imgData);
      });
    },
    // 下载图片
    fileDownload(downloadUrl) {
      let aLink = document.createElement("a");
      aLink.style.display = "none";
      aLink.href = downloadUrl;
      aLink.download = "溯源.png";
      // 触发点击-然后移除
      document.body.appendChild(aLink);
      aLink.click();
      document.body.removeChild(aLink);
    },

    //获取多选按钮的ID
    onSelectChange(selectedRowKeys, selectedRows) {
      var arr = [];
      for (var i = 0; i < selectedRows.length; i++) {
        arr.push(selectedRows[i].yumId);
      }
      // this.arrId = arr.join(",")
      this.arrId = arr;
    },
    //多选下载
    uplods() {
      if (this.arrId == "") {
        this.$message.warning("请选择至少一个进行下载!");
      } else if (this.arrId != "") {
        var url = "http://39.100.16.228:8091/downloadzip/" + this.arrId;
        window.location.href = url;
        this.$message.loading("正在下载请稍等...");
      }
    },

    onChange(date, dateString) {
      this.moment = date;
      this.formSel.searchItem = dateString;
    },
    //搜索
    handSearc() {
      console.log("数据=====", this.moment);
      this.reFresh();
    },
    //单选下载
    toExport(id) {
      var url = "http://39.100.16.228:8091/downloadzip/" + id;
      window.location.href = url;
      // var dowDom = document.querySelector(".dowa")
      // dowDom.download = "这是一个压缩包"
      this.$message.loading("正在下载请稍等...");
    },
    //删除
    confirm(e, id) {
      console.log(e, id);
      var _this = this;
      _this
        .$delete("/gen/hjmallind-goods-yum/delete/" + e, {})
        .then(data => {
          this.$message.success("删除成功");
          //成功了从新拉取数据
          this.reFresh();
        })
        .catch(err => {
          console.warn(err);
        });
    },
    cancel(e) {
      console.log(e);
      this.$message.error("删除失败");
    },
    // deletes(id) {
    //   console.log("??", id)
    //   // var _this = this;
    //   // _this
    //   //   .$delete("/gen/hjmallind-goods-yum/delete/" + id, {
    //   //   })
    //   //   .then(data => {
    //   //     //成功了从新拉取数据
    //   //     this.reFresh()
    //   //   })
    //   //   .catch(err => {
    //   //     console.warn(err);
    //   //   });
    // },
    //切换页面
    changePage(page, pageSize) {
      var _this = this;
      _this.pagination.current = page;
      _this
        .$get("/gen/hjmallind-goods-yum/list", {
          pageNum: _this.pagination.current,
          pageSize: _this.pagination.pageSize,
          plantingType: _this.formSel.searchClass,
          createdAt: _this.formSel.searchItem,
          supervisor: _this.formSel.searchSup,
          storename: _this.formSel.searchOrg
        })
        .then(data => {
          // console.log(data.data.data.records);
          console.log(data, "到了吗");
          _this.pagination.total = data.data.data.total;
          _this.data = data.data.data.records;
        })
        .catch(err => {
          console.warn(err);
        });
    },
    //操作审核状态
    shenhe(type, r, e) {
      this.abc = r;
      if (this.abc == r) {
        this.visible = true;
      }
      var _this = this;
      //设置选中id
      _this.addid = r;
      _this
        .$post("/gen/hjmallind-goods-yum/updateStatus", {
          yumId: _this.addid,
          isShow: type
        })
        .then(data => {
          this.$message.info("修改成功");
          console.log(data, "审核接口?????");
          _this.reFresh();
        });
    },
    //重新刷新数据
    reFresh() {
      var _this = this;
      _this
        .$get("/gen/hjmallind-goods-yum/list", {
          pageNum: _this.pagination.current,
          pageSize: _this.pagination.pageSize,
          plantingType: _this.formSel.searchClass,
          createdAt: _this.formSel.searchItem,
          supervisor: _this.formSel.searchSup,
          storename: _this.formSel.searchOrg
        })
        .then(data => {
          console.log("溯源管理", data);
          //清空搜索内容
          // this.timeValue = undefined
          Object.keys(this.formSel).forEach(key => (this.formSel[key] = ""));
          _this.pagination.total = data.data.data.total;
          _this.data = data.data.data.records;
        })
        .catch(err => {
          console.warn(err);
        });
    },
    //查看详情

    chakanxq(id) {
      var _this = this;
      _this.xiangqing = !_this.xiangqing;
      this.$post(`/gen/hjmallind-goods-yum/queryYumById`, { yumId: id }).then(
        data => {
          // soilTesting
          console.log(data, "xiangqing");
          this.details = data.data.data.records[0];
          var obj = this.details.soilTesting.replace(/-----/g, "-EC值");
          this.details.soilTesting = "PH值" + obj;
          var obj2 = this.details.waterSampling.replace(/-----/g, "-EC值");
          this.details.waterSampling = "PH值" + obj2;
          console.log(this.details, "有吗");
          this.details.soilTestingImg =
            "data:image/png;base64," + this.details.soilTestingImg;
          this.details.inputsImg =
            "data:image/png;base64," + this.details.inputsImg;
          this.details.operationProcessImg =
            "data:image/png;base64," + this.details.operationProcessImg;
          this.details.groupPhoto =
            "data:image/png;base64," + this.details.groupPhoto;
          this.details.contrastImg =
            "data:image/png;base64," + this.details.contrastImg;
          this.details.superviseImg =
            "data:image/png;base64," + this.details.superviseImg;
          //测试
          console.log(this.details, "怎么回事");
          //测试
        }
      );
    }
  }
};
</script>
<style>
/* .ant-popover-inner-content {
  text-align: center;
} */
.my_video {
  max-width: 460px;
}
.vue-directive-image-previewer {
  z-index: 9999999;
}
.details_img {
  width: 200px;
  height: 200px;
  margin-top: 10px;
}
.title_box {
  font-size: 16px;
  line-height: 2.5;
}
.datatile {
  font-weight: 600;
}
/* .ant-modal-body {
  
} */
.searc_box {
  display: flex;
  align-items: center;
}
.my-sele {
  align-items: center;
  display: flex;
  padding-left: 50px;
}
.my-sele .ant-input-affix-wrapper {
  width: 200px;
  margin: 20px 15px;
}
.sele_title {
  margin-top: 20px;
  margin-bottom: 20px;
  white-space: nowrap;
}
.my-sele .ant-calendar-picker {
  padding: 0 10px;
}
.my_dro /deep/ .ant-btn-group.ant-dropdown-button {
  margin-bottom: 60px;
}
.updow {
  cursor: pointer;
  height: 32px;
  border: 1px solid #d9d9d9;
  line-height: 32px;
  text-align: center;
}
.deletes {
  cursor: pointer;
  position: absolute;
  top: 44px;
  width: 96px;
  height: 32px;
  border: 1px solid #d9d9d9;
  line-height: 32px;
  text-align: center;
  left: 50%;
  margin-left: -48px;
}
.table-bg1 {
  background: #fff;
  padding: 0;
}
.xiangq li {
  margin: 10px 0;
  color: #555;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.xiangq p {
  white-space: normal;
}
.xiangq li span {
  font-weight: bold;
  color: #222;
  white-space: nowrap;
  margin-right: 15px;
  width: 80px;
}
.xiangq li img {
  width: 200px;
}
.del-inner {
  cursor: pointer;
  color: rgb(176, 32, 32);
}
.del-inner:hover {
  color: rgb(218, 80, 80);
}
.flex-alv {
  display: flex;
  flex-direction: row;
  align-content: center;
}
.grjl {
  width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
p {
  margin-bottom: 0;
}
.ant-table-pagination.ant-pagination {
  margin-right: 50px;
}
</style>